<template>
  <div class="riskTable-root">
    <formTitleVue title="报警处置统计信息"
    />
    <div class="search">
      <el-date-picker
        v-model="searchForm.time"
        type="month"
        value-format="yyyy-MM"
        @change="changeMonth">
      </el-date-picker>
      <el-button @click="handleExport" class="search-li" type="primary">导出数据</el-button>
    </div>
    <el-table
      :data="tableData"
      class="table"
      height="30vh"
      border
      style="width: 100%">
      <el-table-column
        prop="areaName"
        label="区域名称">
      </el-table-column>
      <el-table-column
        prop="allNum"
        label="报警总数">
      </el-table-column>
      <el-table-column
        prop="szssNum"
        label="市政设施">
      </el-table-column>
      <el-table-column
        prop="fwjzNum"
        label="房屋建筑">
      </el-table-column>
      <el-table-column
        prop="jtssNum"
        label="交通设施">
      </el-table-column>
      <el-table-column
        prop="rymjqyNum"
        label="人员密集区域"
        width="110px">
      </el-table-column>
      <el-table-column
        prop="zjgdNum"
        label="在建工地">
      </el-table-column>
      <el-table-column
        prop="oneLevelNum"
        label="一级">
      </el-table-column>
      <el-table-column
        prop="twoLevelNum"
        label="二级">
      </el-table-column>
      <el-table-column
        prop="threeLevelNum"
        label="三级">
      </el-table-column>
      <el-table-column
        prop="handedNum"
        label="已处置">
      </el-table-column>
      <el-table-column
        prop="unHandedNum"
        label="未处置">
      </el-table-column>


    </el-table>
  </div>
</template>

<script>
  import VTable from "@/components/VTable/index";
  import ButtonForm from "@/components/ButtonForm/index";
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import { time_select_optios } from '@/utils/global.js';
  import { alarmHandingTable, alarmHandingTableExport } from '@/api/alarm/statistics'
  export default {
    name: "riskTable",
    components: {
      VTable,
      ButtonForm,
      formTitleVue,
    },
    data() {
      return {

        tableData: [],
        loading: false,
        buttonList: [{name:'导出数据',methods:'handleExport', type:'primary'}],

        searchForm: {
          time: new Date().getFullYear() + "-" + (new Date().getMonth() + 1),// 当前月份
          startTime: this.$dayjs().startOf("month").format("YYYY-MM-DD")+" 00:00:00",
          endTime: this.$dayjs().endOf("month").format("YYYY-MM-DD")+" 23:59:59",
          areaCode:'',
          placeType:''
        },
      };
    },
    methods: {
      changeMonth(item){
        console.log(item)
        this.searchForm.startTime=this.$dayjs(item).startOf("month").format("YYYY-MM-DD")+" 00:00:00"
        this.searchForm.endTime=this.$dayjs(item).endOf("month").format("YYYY-MM-DD")+" 23:59:59"
        this.getData();
      },
      // 触发按钮区域按钮方法
      clickButton(methods) {
        this[methods]();
      },
      handleExport() {
        alarmHandingTableExport(
          this.searchForm,
          `报警处置统计信息_${new Date().getTime()}.xlsx`
        );
      },
      getData() {
        this.loading = true;
        this.searchForm.areaCode = this.$store.state.account.user.deptIds;
        this.searchForm.placeType = this.$commonJs.getPlaceType(this.searchForm.areaCode);
        alarmHandingTable(this.searchForm).then((res) => {
          this.tableData=res.data
          this.loading = false
        });
      },
    },
    mounted() {
      this.getData();
    },
  };
</script>

<style lang="scss" scoped>
  .riskTable-root {
    .search{
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      padding-top: 0;
    }
  }
  ::v-deep .table-col-select-container{
    margin-bottom: 0px;
  }
</style>
